<template>
  <van-form>
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px">
      <input
        class="van-button van-button--info van-button--normal van-button--block van-button--round"
        type="button"
        value="登录"
        @click="onSubmit"
      />
    </div>
    <div style="margin: 16px">
      <van-button
        round
        block
        size="normal"
        type="info"
        to="register?model=green"
        v-if="this.$route.query.model === 'green'"
        >注册</van-button
      >
      <van-button
        round
        block
        size="normal"
        type="info"
        to="register"
        v-if="this.$route.query.model != 'green'"
        >注册</van-button
      >
    </div>
  </van-form>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      fingerprintCode: "",
      uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = "-";

        this.uuidA = s.join("");
        return this.uuidA;
      },
      isWechat() {
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      },
      setCookie(c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie =
          c_name +
          "=" +
          escape(value) +
          (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
      },
      getCookie(c_name) {
        if (document.cookie.length > 0) {
          let c_start = document.cookie.indexOf(c_name + "=");
          if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            let c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
          }
        }
        return "";
      },
    };
  },
  methods: {
    onSubmit(values) {
      // let localPrintCode = localStorage.getItem("fingerprintCode");
      let localPrintCode = this.getCookie("fingerprintCode");
      if (!localPrintCode) {
        localPrintCode = this.uuid();
      }
      let formData = new FormData();
      formData.append("username", this.username + ";" + localPrintCode);
      formData.append("password", this.password);
      this.$axios
        .post("/cloud_api/login", formData, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
        })
        .then((res) => {
          let result = res.data;
          if (result.resultCode != 1000) {
            this.$dialog.alert({
              message: result.tipMsg,
              theme: "round-button",
            });
          } else {
            this.$dialog
              .alert({
                message: result.tipMsg,
                theme: "round-button",
              })
              .then(() => {
                if (!this.getCookie("fingerprintCode")) {
                  this.setCookie("fingerprintCode", localPrintCode, 365 * 10);
                }
                if (this.$route.query.model === "green") {
                  this.$router.push({ path: "/green" });
                } else {
                  this.$router.push({ path: "/dibbling" });
                }
              });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>
